<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<meta charset="utf-8">
	<title>购物车</title>
	<link rel="stylesheet" href="css/showcart.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />

	<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/imgs.js" type="text/javascript" charset="utf-8"></script>

	<script>
		window.onload=function footer_img_non(){
			document.getElementById("footer_img").style.display="none";
		}
	</script>
</head>
<body onload="money()">
<div class="con">
	<div class="head">
		<a href="index.jsp"> <img src="img/logo_login.png" alt="" />
		</a>
	</div>
	<div class="shop_box">
		<div class="head_text_box">
			<span id="head_text"> 我的购物车 </span>
		</div>

		<div class="shop_title">
			<div id="st1">商品</div>
			<div id="st2">规格</div>
			<div id="st3">单价</div>
			<div id="st4">数量</div>
			<div id="st5">小计</div>
			<div id="st6">操作</div>
		</div>
		<%----%>
		<script>
			/*定义一个总计 函数*/
			function total (){
				let sum =  0 ;
				$(".fsum").each(function(){
					sum += parseFloat($(this).text());
				});
				$("#money").text(sum.toFixed(2));
			}
			/*页面所有元素都初始化完毕后加载*/
			$(function(){
				// total();


				/*给 页面上所有的  减号  注册  click 单击事件*/
				$(".numl").click(function(){


					/*1.获取 cid的值 */
					let  cid = $(this).attr("id").substring(0,32);
					/*1.2 获取数量*/
					let  thiscount  =parseInt($("#"+cid+"ccount").text());

					if(thiscount==1){
						if(confirm("确认删除吗？")){
							location.href="/fruit/cart/RemoveCartByCidServlet?cid="+cid;
						}

					}else{
						/*2.  update  cart  set  cccount =  ccount +?  where cid = ?*/
						/*发送异步请求*/
						$.ajaxSettings.async =false ;/*默认是true 表示异步 */
						/*如果 true   表示异步， 不会等后端返回回来的结果， 继续执行*/
						/*如果 false  表示同步， 死等服务器返回回来的结果 */
						/*
                        * 1.参数  请求的后端路径
                        * 2.参数    请求参数
                        * 3.参数   res 服务器返回回来的结果，函数里面书写的是你拿到服务器返回来结果你要做什么
                        * 4.参数   要求服务器返回给前端的数据格式，默认是String ,修改为json，可以直接使用需求中的数据类型
                        * */
						$.post("/fruit/cart/UpdateCartByCidForCcountServlet",
								{"cid":cid,'count':-1},
								function(res){
									/*如果res 为  真 true ,重新计算小计，以及更新数量*/
									if(res){
										/*4.1 更新前端页面的 新数量*/
										$("#"+cid+"ccount").text(parseInt($("#"+cid+"ccount").text())-1);
										/*4.2 获取单价*/
										let price =  parseFloat($("#"+cid+"price").text());
										/*4.3 求新数量*/
										let newccount = parseInt($("#"+cid+"ccount").text());
										/*4.4 更新小计*/
										let  subtoal =  (newccount*price).toFixed(2);
										$("#"+cid+"subtotal").text(subtoal)
										/*4.5 更新总计*/
										total();
									}else{
										alert("请重试！");
									}
								},
								"json");
					}


				});

				/*给 页面上所有的  加号  注册  click 单击事件*/
				$(".numr").click(function (){
					/*1.获取 cid的值 */
					let  cid = $(this).attr("id").substring(0,32);
					/*2.  update  cart  set  cccount =  ccount +?  where cid = ?*/
					/*发送异步请求*/
					$.ajaxSettings.async =false ;/*默认是true 表示异步 */
					/*如果 true   表示异步， 不会等后端返回回来的结果， 继续执行*/
					/*如果 false  表示同步， 死等服务器返回回来的结果 */
					/*
                    * 1.参数  请求的后端路径
                    * 2.参数    请求参数
                    * 3.参数   res 服务器返回回来的结果，函数里面书写的是你拿到服务器返回来结果你要做什么
                    * 4.参数   要求服务器返回给前端的数据格式，默认是String ,修改为json，可以直接使用需求中的数据类型
                    * */
					$.post("/fruit/cart/UpdateCartByCidForCcountServlet",
							{"cid":cid,'count':1},
							function(res){
								/*如果res 为  真 true ,重新计算小计，以及更新数量*/
								if(res){
									/*4.1 更新前端页面的 新数量的文本*/
									$("#"+cid+"ccount").text(parseInt($("#"+cid+"ccount").text())+1);
									/*4.2 获取单价*/
									let price =  parseFloat($("#"+cid+"price").text());
									/*4.3 求新数量*/
									let newccount = parseInt($("#"+cid+"ccount").text());
									/*4.4 更新小计*/
									let  subtoal =  (newccount*price).toFixed(2);
									$("#"+cid+"subtotal").text(subtoal);
									/*4.5 更新总计*/
									total();
								}else{
									alert("请重试！");
								}
							},
							"json");
				});
			})
		</script>
		<%--kaishi--%>
		<c:forEach items="${cartpovos}" var="cartpovo">
			<div class="shop">
				<div class="s1">
					<div class="s1_img">
						<a href="/fruit/goods/GetFruitByFidServlet?f_id=${cartpovo.fruit.f_id}">

							<img src="img/fruits/${cartpovo.fruit.f_id}/(1).jpg" />
						</a>
					</div>
					<div class="s1_text">
						<a href="/fruit/goods/GetFruitByFidServlet?f_id=${cartpovo.fruit.f_id}">${cartpovo.fruit.f_name}</a>
					</div>
				</div>

				<div class="s2">${cartpovo.fruit.f_norm}</div>

				<div class="s3">
					￥<span id="${cartpovo.cart.cid}price">${cartpovo.fruit.f_price}</span>
				</div>

				<div class="s4">
					<div class="Unum">
						<span id="${cartpovo.cart.cid}numl" class="numl" >-</span>
						<span id="${cartpovo.cart.cid}ccount">${cartpovo.cart.ccount}</span>
						<span id="${cartpovo.cart.cid}numr" class="numr" >+</span>
					</div>
				</div>

				<div class="s5">
					￥<span id="${cartpovo.cart.cid}subtotal" class="fsum">${cartpovo.subtotal}</span>
				</div>

				<div class="s6">
					<a href="/fruit/cart/RemoveCartByCidServlet?cid=${cartpovo.cart.cid}">删除</a>
				</div>
			</div>
		</c:forEach>
		<%--jieshu--%>

		<div class="shop_footer">&nbsp;</div>
	</div>



	<div class="sum_mon">
		<div class="money">
			商品总金额：<span id="money">￥68 </span>
		</div>
		<br /> <input type="button" name="" id="addmon" value="订单结算" />
	</div>
</div>
<jsp:include page="footer/footer.jsp"></jsp:include>
</body>
</html>
